<template>
    <div class="alumni-artical-details">
        <nav-header>
            <template slot="menuBefore">
                <li><router-link to="/life/alumni/alumni-list" tag="a">校友服务</router-link></li>
                <li class="gap">&gt;</li>
            </template>
            <li v-if="this.$route.params.id">文章详情</li>
        </nav-header>
        <div class="alumni-artical-details" v-loading="loading.status" :element-loading-text="loading.txt" >
            <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm" disabled>
                <el-form-item label="文章标题：" >
                    <p>{{ruleForm.title}}</p>
                </el-form-item>
                <el-form-item label="文章内容：" >
                    <div class="content" v-html="ruleForm.content"></div>
                </el-form-item>
            </el-form>
        </div>
        <p class="count">{{count}} / 5000</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 加载数据时显示的信息和加载动画
                loading:{
                    status:false,
                    txt:'获取数据...',
                },
                ruleForm: {
                    title: '',
                    content: '',
                },
                previewId:'',    // 当前预览文章的id
                count: '',    // 统计字数
            }
        },
         mounted(){
        console.log(this.$route
        )
    },
        created(){
            if(this.$route.params.id){
                var previewId = this.$route.params.id;
                this.previewId = previewId;
                this.getData(previewId);
            }
        },
        methods: {
            // 获取文章详情
            getData(id){
                var listParam = {
                    id:id
                }

                // 显示加载动画
                this.loading.status = true;
                let success = (res=>{
                    // 隐藏加载动画
                    this.loading.status = false;

                    var data = res.data;

                    this.ruleForm.title = data.title;
                    this.ruleForm.content = data.content;

                    this.$nextTick(() => {
                        this.count = document.querySelector('.content').textContent.length;
                    })


                })
                let fail = ( data => {
                    // 隐藏加载动画
                    this.loading.status = false;
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('api/alumni/alumniNews',{params: listParam,func:{success:success,fail:fail}})
            },
        },
    }
</script>

<style lang="scss">
    .alumni-artical-details{
        .el-form{
            .el-form-item{
                margin: 0;

                .el-form-item__label{
                    height: 60px;
                    line-height: 60px;
                    color: #888;
                }

                .el-form-item__content{
                    div{
                        margin:0;
                        word-break: break-all;
                        letter-spacing: 0.8px
                    }

                }
                
                &:first-child{
                    .el-form-item__content{
                        padding-top: 13px;

                        >p{
                            margin:0;
                            padding: 0 15px;
                            word-break: break-all;
                            letter-spacing: 0.8px;
                            border: 1px solid #ddd;
                        }

                    }

                }

                &:last-child{
                    .el-form-item__content{
                        padding-top: 20px;

                        >div{
                            margin:0;
                            padding: 15px;
                            height: 600px;
                            word-break: break-all;
                            letter-spacing: 0.8px;
                            border: 1px solid #ddd;
                            overflow-x: hidden;
                        }

                    }

                }

            }

        }

        .count{
            margin-top: 5px;
            text-align: right;
            font-size: 12px;
            color: #999;
        }

    }
</style>
